<template>
	<view>
		<view class="nav pd_left10"
			:style="{'background-color':bgColor,'top':statusBarHeight*2 +'rpx','height':titleBarHeight*2+'rpx','color':color,'font-size':fontSize,'font-weight':fontWeight}">
			<view class="nav_item" :style="{width:isLeft? 'auto' : ''}">
				<slot name="left"></slot>
			</view>
			<view class="nav_item" :style="{width:isLeft? 'auto' : '',marginRight:isLeft?'auto' : '',marginLeft:isLeft?'40rpx' : ''}">
				<slot name="content"></slot>
			</view>
			<view class="nav_item">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "navBar",
		props:{
			isLeft:{
				type:Boolean,
				default:false
			},
			fontSize:{
				type:String,
				default:'36rpx'
			},
			color:{
				type:String,
				default:'#333'
			},
			fontWeight:{
				type:[String,Number],
				default:'bold'
			},
			bgColor:{
				type:[String],
				default:'transparent'
			}
		},
		data() {
			return {
				titleBarHeight: 44,
				statusBarHeight: 0
			};
		},
		mounted() {
		
			// #ifdef MP-WEIXIN
			let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
			uni.getSystemInfo({ //获取系统信息
				success: res => {
					let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
					this.titleBarHeight = navHeight;
					this.statusBarHeight = res.statusBarHeight
				},
				fail(err) {
					console.log(err);
				}
			})
			// #endif
			
			// #ifdef APP-PLUS
			uni.getSystemInfo({ //获取系统信息
				success: res => {
					this.titleBarHeight = 40;
					this.statusBarHeight = res.statusBarHeight
				},
				fail(err) {
					console.log(err);
				}
			})
			// #endif
			
			
			//保存高度到状态管理 供全局使用
			this.$store.commit('updateNavBarHeight',this.titleBarHeight)
			this.$store.commit('updateStatusBarHeight',this.statusBarHeight)
			
		}
	}
</script>

<style lang="scss">
	.nav {
		
		width: 100%;
		// background-color: red;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.nav_item{
			width: calc(100vw / 3);
			// width: 120px;
			text-align: center;
		}
		.nav_item:nth-of-type(1){
			text-align: left;
		}
	}
</style>
